<!doctype html>



  


<html class="theme-next pisces use-motion">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PBHRK7');</script>
<!-- End Google Tag Manager -->
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.0.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="前端 知识 面试," />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.0.2" />






<meta name="description" content="目录  &amp;emsp;1. JavaScript 有哪些数据类型 &amp;emsp;2. 怎么判断不同的JS数据类型 &amp;emsp;3. undefined 和 null 有什么区别 &amp;emsp;4. 数组对象有哪些常用方法 &amp;emsp;5. Js 有哪几种创建对象的方式 &amp;emsp;6. 怎么实现对对象的拷贝(浅拷贝与深拷贝) &amp;emsp;7. 什么是闭包，为什么要用它 &amp;emsp;8. 介绍一下 Jav">
<meta name="keywords" content="前端 知识 面试">
<meta property="og:type" content="article">
<meta property="og:title" content="前端面试《第十七篇》javascript 基础">
<meta property="og:url" content="http://wurh.github.io/2019/03/31/201904010040/index.html">
<meta property="og:site_name" content="华Ing&#39;s blog">
<meta property="og:description" content="目录  &amp;emsp;1. JavaScript 有哪些数据类型 &amp;emsp;2. 怎么判断不同的JS数据类型 &amp;emsp;3. undefined 和 null 有什么区别 &amp;emsp;4. 数组对象有哪些常用方法 &amp;emsp;5. Js 有哪几种创建对象的方式 &amp;emsp;6. 怎么实现对对象的拷贝(浅拷贝与深拷贝) &amp;emsp;7. 什么是闭包，为什么要用它 &amp;emsp;8. 介绍一下 Jav">
<meta property="og:locale" content="en">
<meta property="og:image" content="https://raw.githubusercontent.com/ltadpoles/web-document/master/Other/images/%E5%8E%9F%E5%9E%8B%E5%9B%BE%E7%A4%BA.jpg">
<meta property="og:image" content="https://raw.githubusercontent.com/ltadpoles/web-document/master/Other/images/%E5%8E%9F%E5%9E%8B%E9%93%BE.png">
<meta property="og:updated_time" content="2019-07-12T06:10:38.191Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端面试《第十七篇》javascript 基础">
<meta name="twitter:description" content="目录  &amp;emsp;1. JavaScript 有哪些数据类型 &amp;emsp;2. 怎么判断不同的JS数据类型 &amp;emsp;3. undefined 和 null 有什么区别 &amp;emsp;4. 数组对象有哪些常用方法 &amp;emsp;5. Js 有哪几种创建对象的方式 &amp;emsp;6. 怎么实现对对象的拷贝(浅拷贝与深拷贝) &amp;emsp;7. 什么是闭包，为什么要用它 &amp;emsp;8. 介绍一下 Jav">
<meta name="twitter:image" content="https://raw.githubusercontent.com/ltadpoles/web-document/master/Other/images/%E5%8E%9F%E5%9E%8B%E5%9B%BE%E7%A4%BA.jpg">



<script type="text/javascript" id="hexo.configuration">
  var NexT = window.NexT || {};
  var CONFIG = {
    scheme: 'Pisces',
    sidebar: {"position":"left","display":"post"},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: 'Author'
    }
  };
</script>




  <link rel="canonical" href="http://wurh.github.io/2019/03/31/201904010040/"/>


  <title> 前端面试《第十七篇》javascript 基础 | 华Ing's blog </title>
</head>

<body itemscope itemtype="//schema.org/WebPage" lang="en">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PBHRK7"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

  










  
  
    
  

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-69412379-1', 'auto');
  ga('send', 'pageview');

</script>

  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b3ddfb8655d8b77429e04c7a4d5bcbc1";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
  </script>


  <div class="container one-collumn sidebar-position-left page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="//schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">华Ing's blog</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle">harder and harder</p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
            Categories
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
            Archives
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
            Tags
          </a>
        </li>
      

      
    </ul>
  

  
</nav>

 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="//schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                前端面试《第十七篇》javascript 基础
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">Posted on</span>
            <time itemprop="dateCreated" datetime="2019-03-31T18:31:12+08:00" content="2019-03-31">
              2019-03-31
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">In</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/前端面试/" itemprop="url" rel="index">
                    <span itemprop="name">前端面试</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/2019/03/31/201904010040/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="2019/03/31/201904010040/" itemprop="commentsCount"></span>
                </a>
              </span>
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <html><br><h2>目录</h2><br></html>

<p>&emsp;<a href="#j1">1. JavaScript 有哪些数据类型</a></p>
<p>&emsp;<a href="#j2">2. 怎么判断不同的JS数据类型</a></p>
<p>&emsp;<a href="#j3">3. undefined 和 null 有什么区别</a></p>
<p>&emsp;<a href="#j4">4. 数组对象有哪些常用方法</a></p>
<p>&emsp;<a href="#j5">5. Js 有哪几种创建对象的方式</a></p>
<p>&emsp;<a href="#j6">6. 怎么实现对对象的拷贝(浅拷贝与深拷贝)</a></p>
<p>&emsp;<a href="#j7">7. 什么是闭包，为什么要用它</a></p>
<p>&emsp;<a href="#j8">8. 介绍一下 JavaScript 原型，原型链，它们有何特点</a></p>
<p>&emsp;<a href="#j9">9. JavaScript 如何实现继承</a></p>
<p>&emsp;<a href="#j10">10. new 操作符具体干了什么</a></p>
<p>&emsp;<a href="#j11">11. 同步和异步的区别，怎么异步加载 JavaScript</a></p>
<p>&emsp;<a href="#j12">12. 跨域问题的产生，怎么解决它</a></p>
<p>&emsp;<a href="#j13">13. 对 this 的理解</a></p>
<p>&emsp;<a href="#j14">14. apply()、call()和 bind() 是做什么的，它们有什么区别</a></p>
<p>&emsp;<a href="#j15">15. 什么是内存泄漏，哪些操作会造成内存泄漏</a></p>
<p>&emsp;<a href="#j16">16. 什么是事件代理，它的原理是什么</a></p>
<p>&emsp;<a href="#j17">17. 对AMD和CMD的理解，它们有什么区别</a></p>
<p>&emsp;<a href="#j18">18. 对ES6的了解</a></p>
<p>&emsp;<a href="#j19">19. 箭头函数有什么特点</a></p>
<p>&emsp;<a href="#j20">20. Promise 对象的了解</a></p>
<p>&emsp;<a href="#j21">21. async 函数以及 awit 命令</a></p>
<p>&emsp;<a href="#j22">22. export 与 export default有什么区别</a></p>
<p>&emsp;<a href="#j23">23. 前端性能优化</a></p>
<p>&emsp;<a href="#j24">24. 对JS引擎执行机制的理解</a></p>
<h5 id="j1">1. JavaScript 有哪些数据类型</h5>

<p>6种原始数据类型：</p>
<ul>
<li>Boolean: 布尔表示一个逻辑实体，可以有两个值：<code>true</code> 和 <code>false</code></li>
<li>Number: 用于表示数字类型</li>
<li>String: 用于表示文本数据</li>
<li>Null: <code>Null</code> 类型只有一个值： <code>null</code>,特指对象的值未设置</li>
<li>Undefined: 一个没有被赋值的变量会有个默认值 <code>undefined</code></li>
<li>Symbol: 符号(Symbols)是ECMAScript第6版新定义的。符号类型是唯一的并且是不可修改的</li>
</ul>
<p>引用类型：<code>Object</code></p>
<p>详见 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures" target="_blank" rel="noopener">JavaScript的数据类型-MDN</a></p>
<h5 id="j2">2. 怎么判断不同的JS数据类型 </h5>

<ul>
<li><code>typeof</code>操作符：返回一个字符串，表示未经计算的操作数的类型</li>
</ul>
<blockquote>
<p><code>typeof</code> 操作符对于简单数据类型，返回其本身的数据类型，函数对象返回 <code>function</code> ，其他对象均返回 <code>Object</code></p>
</blockquote>
<blockquote>
<p><code>null</code> 返回 <code>Object</code></p>
</blockquote>
<ul>
<li>instanceof: 用来判断A 是否是 B的实例，表达式为 <code>A instanceof B</code>，返回一个<code>Boolean</code>类型的值</li>
</ul>
<blockquote>
<p><code>instanceof</code> <strong>检测的是原型,只能用来判断两个对象是否属于实例关系， 而不能判断一个对象实例具体属于哪种类型</strong></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [];</span><br><span class="line">a <span class="keyword">instanceof</span> <span class="built_in">Array</span>  <span class="comment">// true</span></span><br><span class="line">a <span class="keyword">instanceof</span> <span class="built_in">Object</span> <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>变量a 的 <code>__proto__</code>  直接指向<code>Array.prototype</code>，间接指向 <code>Object.prototype</code>，所以按照 <code>instanceof</code> 的判断规则，a 就是<code>Object</code>的实例.针对数组的这个问题，ES5 提供了 <code>Array.isArray()</code> 方法 。该方法用以确认某个对象本身是否为 Array 类型</p>
</blockquote>
<ul>
<li>constructor: 当一个函数被定义时，JS引擎会为其添加<code>prototype</code>原型，然后再在 <code>prototype</code>上添加一个 <code>constructor</code> 属性，并让其指向该函数的引用</li>
</ul>
<blockquote>
<p><code>null</code>和<code>undefined</code>是无效的对象，因此是不会有<code>constructor</code>存在的，这两种类型的数据需要通过其他方式来判断</p>
</blockquote>
<blockquote>
<p>函数的<code>constructor</code>是不稳定的，这个主要体现在自定义对象上，当开发者重写<code>prototype</code>后，原有的<code>constructor</code>引用会丢失，<code>constructor</code>会默认为 <code>Object</code></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line"><span class="keyword">var</span> f = <span class="keyword">new</span> F;</span><br><span class="line">f.constructor == F <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line">F.prototype = &#123;<span class="attr">a</span>: <span class="number">1</span>&#125;</span><br><span class="line"><span class="keyword">var</span> f = <span class="keyword">new</span> F</span><br><span class="line">f.constructor == F <span class="comment">// false</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>在构造函数 <code>F.prototype</code> 没有被重写之前，构造函数 <code>F</code> 就是新创建的对象 <code>f</code> 的数据类型。当 <code>F.prototype</code> 被重写之后，原有的 <code>constructor</code> 引用丢失, 默认为 Object</p>
</blockquote>
<blockquote>
<p>因此，为了规范开发，在重写对象原型时一般都需要重新给 <code>constructor</code> 赋值，以保证对象实例的类型不被篡改</p>
</blockquote>
<ul>
<li>toString: <code>Object</code> 的原型方法，调用该方法，默认返回当前对象的 <code>[[Class]]</code> 。这是一个内部属性，其格式为 <code>[object Xxx]</code> ，其中 <code>Xxx</code> 就是对象的类型</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.prototype.toString.call(<span class="string">''</span>) ;   <span class="comment">// [object String]</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call(<span class="number">11</span>) ;    <span class="comment">// [object Number]</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call(<span class="literal">true</span>) ; <span class="comment">// [object Boolean]</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call(<span class="built_in">Symbol</span>()); <span class="comment">//[object Symbol]</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call(<span class="literal">undefined</span>) ; <span class="comment">// [object Undefined]</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call(<span class="literal">null</span>) ; <span class="comment">// [object Null]</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call(<span class="keyword">new</span> <span class="built_in">Function</span>()) ; <span class="comment">// [object Function]</span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.call([]) ; <span class="comment">// [object Array]</span></span><br></pre></td></tr></table></figure>
<h5 id="j3">3. undefined 和 null 有什么区别</h5>

<blockquote>
<p><code>null</code>表示”没有对象”，即该处不应该有值</p>
</blockquote>
<p>典型用法：</p>
<ol>
<li>作为函数的参数，表示该函数的参数不是对象</li>
<li>作为对象原型链的终点</li>
</ol>
<blockquote>
<p><code>undefined</code>表示”缺少值”，就是此处应该有一个值，但是还没有定义</p>
</blockquote>
<p>典型用法：</p>
<ol>
<li>变量被声明了，但没有赋值时，就等于<code>undefined</code></li>
<li>调用函数时，应该提供的参数没有提供，该参数等于<code>undefined</code></li>
<li>对象没有赋值的属性，该属性的值为<code>undefined</code></li>
<li>函数没有返回值时，默认返回<code>undefined</code></li>
</ol>
<p>详见： <a href="http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html" target="_blank" rel="noopener">undefined和null的区别-阮一峰</a></p>
<h5 id="j4">4. 数组对象有哪些常用方法</h5>

<blockquote>
<p>修改器方法：</p>
</blockquote>
<ul>
<li>pop(): 删除数组的最后一个元素，并返回这个元素</li>
<li>push()：在数组的末尾增加一个或多个元素，并返回数组的新长度</li>
<li>reverse(): 颠倒数组中元素的排列顺序</li>
<li>shift(): 删除数组的第一个元素，并返回这个元素</li>
<li>unshift(): 在数组的开头增加一个或多个元素，并返回数组的新长度</li>
<li>sort(): 对数组元素进行排序，并返回当前数组</li>
<li>splice(): 在任意的位置给数组添加或删除任意个元素</li>
</ul>
<blockquote>
<p>访问方法：</p>
</blockquote>
<ul>
<li>concat(): 返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组</li>
<li>join(): 连接所有数组元素组成一个字符串</li>
<li>slice(): 抽取当前数组中的一段元素组合成一个新数组</li>
<li>indeOf(): 返回数组中第一个与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1</li>
<li>lastIndexOf(): 返回数组中最后一个（从右边数第一个）与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1</li>
</ul>
<blockquote>
<p>迭代方法：</p>
</blockquote>
<ul>
<li>forEach(): 为数组中的每个元素执行一次回调函数,最终返回 <code>undefined</code></li>
<li>every(): 如果数组中的每个元素都满足测试函数，则返回 <code>true</code>，否则返回 false</li>
<li>some(): 如果数组中至少有一个元素满足测试函数，则返回 <code>true</code>，否则返回 false</li>
<li>filter(): 将所有在过滤函数中返回 <code>true</code> 的数组元素放进一个新数组中并返回</li>
<li>map(): 返回一个由回调函数的返回值组成的新数组</li>
</ul>
<p>更多方法请参考 MDN <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener">传送门</a></p>
<h5 id="j5">5. Js 有哪几种创建对象的方式</h5>

<blockquote>
<p>对象字面量<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;&#125;</span><br></pre></td></tr></table></figure></p>
</blockquote>
<blockquote>
<p>Object 构造函数<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = <span class="keyword">new</span> <span class="built_in">Object</span>()</span><br></pre></td></tr></table></figure></p>
</blockquote>
<blockquote>
<p>工厂模式<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name, age</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> o = <span class="keyword">new</span> <span class="built_in">Object</span>()</span><br><span class="line">    o.name = name;</span><br><span class="line">    o.age = age;</span><br><span class="line">    o.say = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(name)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> o</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
</blockquote>
<p>缺点： 每次通过<code>Person</code>创建对象的时候，所有的<code>say</code>方法都是一样的，但是却存储了多次，浪费资源</p>
<blockquote>
<p>构造函数模式<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name, age</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = name</span><br><span class="line">    <span class="keyword">this</span>.age = age</span><br><span class="line">    <span class="keyword">this</span>.say = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(name)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> Person(<span class="string">'hello'</span>, <span class="number">18</span>)</span><br></pre></td></tr></table></figure></p>
</blockquote>
<p>构造函数模式隐试的在最后返回<code>return this</code> 所以在缺少<code>new</code>的情况下，会将属性和方法添加给全局对象，浏览器端就会添加给<code>window</code>对象,可以根据<code>return this</code> 的特性调用<code>call</code>或者<code>apply</code>指定<code>this</code></p>
<blockquote>
<p>原型模式<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">Person.prototype.name = <span class="string">'hanmeimei'</span>;</span><br><span class="line">Person.prototype.say = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  alert(<span class="keyword">this</span>.name);</span><br><span class="line">&#125;</span><br><span class="line">Person.prototype.friends = [<span class="string">'lilei'</span>];</span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> Person();</span><br></pre></td></tr></table></figure></p>
</blockquote>
<p>实现了方法与属性的共享，可以动态添加对象的属性和方法。但是没有办法创建实例自己的属性和方法，也没有办法传递参数</p>
<blockquote>
<p>构造函数和原型组合<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name, age</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = name</span><br><span class="line">    <span class="keyword">this</span>.age = age</span><br><span class="line">&#125;</span><br><span class="line">Person.prototype.say = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.name)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> Person(<span class="string">'hello'</span>)</span><br></pre></td></tr></table></figure></p>
</blockquote>
<p>还有好几种模式，感兴趣的小伙伴可以参考 <strong>红宝书</strong>，你们肯定知道的了！</p>
<h5 id="j6">6. 怎么实现对对象的拷贝(浅拷贝与深拷贝)</h5>

<blockquote>
<p>浅拷贝</p>
</blockquote>
<ul>
<li>拷贝原对象引用</li>
<li>可以使用<code>Array.prototype.slice()</code>也可以完成对一个数组或者对象的浅拷贝</li>
<li><code>Object.assign()</code>方法</li>
</ul>
<blockquote>
<p>深拷贝</p>
</blockquote>
<ul>
<li>最常用的方式就是 <code>JSON.parse(JSON.stringify(目标对象)</code>，缺点就是只能拷贝符合<code>JSON</code>数据标准类型的对象</li>
</ul>
<h5 id="j7">7. 什么是闭包，为什么要用它</h5>

<blockquote>
<p>简单来说，闭包就是能够读取其他函数内部变量的函数<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> name = <span class="string">'hello'</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">say</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(name)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> say()</span><br><span class="line">&#125;</span><br><span class="line">Person() <span class="comment">// hello</span></span><br></pre></td></tr></table></figure></p>
</blockquote>
<blockquote>
<p>由于 JavaScript 特殊的作用域，函数外部无法直接读取内部的变量，内部可以直接读取外部的变量，从而就产生了闭包的概念</p>
</blockquote>
<p>用途：</p>
<blockquote>
<p>最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中</p>
</blockquote>
<p>注意点：</p>
<blockquote>
<p>由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露</p>
</blockquote>
<h5 id="j8">8. 介绍一下 JavaScript 原型，原型链，它们有何特点</h5>

<p>首先明确一点，<strong>JavaScript是基于原型的</strong></p>
<blockquote>
<p>每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的内部指针.</p>
</blockquote>
<p><img src="https://raw.githubusercontent.com/ltadpoles/web-document/master/Other/images/%E5%8E%9F%E5%9E%8B%E5%9B%BE%E7%A4%BA.jpg" alt="image"></p>
<p>图解：</p>
<ul>
<li>每一个构造函数都拥有一个<code>prototype</code>属性，这个属性指向一个对象，也就是原型对象</li>
<li>原型对象默认拥有一个<code>constructor</code>属性，指向指向它的那个构造函数</li>
<li>每个对象都拥有一个隐藏的属性<code>[[prototype]]</code>，指向它的原型对象</li>
</ul>
<p>那么什么是原型链：</p>
<blockquote>
<p><code>JavaScript</code>中所有的对象都是由它的原型对象继承而来。而原型对象自身也是一个对象，它也有自己的原型对象，这样层层上溯，就形成了一个类似链表的结构，这就是原型链</p>
</blockquote>
<blockquote>
<p>所有原型链的终点都是<code>Object</code>函数的<code>prototype</code>属性。<code>Objec.prototype</code>指向的原型对象同样拥有原型，不过它的原型是<code>null</code>，而<code>null</code>则没有原型</p>
</blockquote>
<p><img src="https://raw.githubusercontent.com/ltadpoles/web-document/master/Other/images/%E5%8E%9F%E5%9E%8B%E9%93%BE.png" alt="image"></p>
<h5 id="j9">9. JavaScript 如何实现继承</h5>

<ul>
<li>原型链继承</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Animal</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">Animal.prototype.name = <span class="string">'cat'</span></span><br><span class="line">Animal.prototype.age = <span class="number">1</span></span><br><span class="line">Animal.prototype.say = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;<span class="built_in">console</span>.log(<span class="string">'hello'</span>)&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> cat = <span class="keyword">new</span> Animal()</span><br><span class="line"></span><br><span class="line">cat.name  <span class="comment">// cat</span></span><br><span class="line">cat.age  <span class="comment">// 1</span></span><br><span class="line">cat.say() <span class="comment">// hello</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>最简单的继承实现方式，但是也有其缺点</p>
<ol>
<li>来自原型对象的所有属性被所有实例共享</li>
<li>创建子类实例时，无法向父类构造函数传参</li>
<li>要想为子类新增属性和方法，必须要在<code>new</code>语句之后执行，不能放到构造器中</li>
</ol>
</blockquote>
<ul>
<li>构造继承</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Animal</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.species = <span class="string">"动物"</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Cat</span>(<span class="params">name, age</span>) </span>&#123;</span><br><span class="line">    Animal.call(<span class="keyword">this</span>)</span><br><span class="line">    <span class="keyword">this</span>.name = name </span><br><span class="line">    <span class="keyword">this</span>.age = age</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> cat = <span class="keyword">new</span> Cat(<span class="string">'豆豆'</span>, <span class="number">2</span>)</span><br><span class="line"></span><br><span class="line">cat.name  <span class="comment">// 豆豆</span></span><br><span class="line">cat.age <span class="comment">// 2</span></span><br><span class="line">cat.species <span class="comment">// 动物</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>使用call或apply方法，将父对象的构造函数绑定在子对象上.</p>
</blockquote>
<ul>
<li>组合继承</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Animal</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.species = <span class="string">"动物"</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Cat</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line">  Animal.call(<span class="keyword">this</span>)</span><br><span class="line">  <span class="keyword">this</span>.name = name</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Cat.prototype = <span class="keyword">new</span> Animal() <span class="comment">// 重写原型</span></span><br><span class="line">Cat.prototype.constructor = Cat</span><br></pre></td></tr></table></figure>
<blockquote>
<p>如果没有<code>Cat.prototype = new Animal()</code>这一行，<code>Cat.prototype.constructor</code>是指向<code>Cat</code>的；加了这一行以后，<code>Cat.prototype.constructor</code>指向<code>Animal</code>.这显然会导致继承链的紊乱（cat1明明是用构造函数Cat生成的），因此我们必须手动纠正，将<code>Cat.prototype</code>对象的<code>constructor</code>值改为<code>Cat</code></p>
</blockquote>
<ul>
<li><code>extends</code> 继承<br>ES6新增继承方式，Class 可以通过extends关键字实现继承</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Animal</span> </span>&#123;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Cat</span> <span class="keyword">extends</span> <span class="title">Animal</span> </span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>() &#123;</span><br><span class="line">        <span class="keyword">super</span>();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>使用 <code>extends</code> 实现继承，必须添加 <code>super</code> 关键字定义子类的 <code>constructor</code>，这里的<code>super()</code> 就相当于 <code>Animal.prototype.constructor.call(this)</code></p>
</blockquote>
<p>当然，还有很多种实现继承的方式，这里就不多说了。然后，再推荐一波 <strong>红宝书</strong></p>
<h5 id="j10">10. new 操作符具体干了什么</h5>

<ul>
<li>创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型</li>
<li>属性和方法被加入到 this 引用的对象中</li>
<li>新创建的对象由 this 所引用，并且最后隐式的返回 this</li>
</ul>
<h5 id="j11">11. 同步和异步的区别，怎么异步加载 JavaScript</h5>

<blockquote>
<p>同步模式</p>
</blockquote>
<p>同步模式，又称阻塞模式。<code>javascript</code> 在默认情况下是会阻塞加载的。当前面的 <code>javascript</code> 请求没有处理和执行完时，会阻止浏览器的后续处理</p>
<blockquote>
<p>异步模式</p>
</blockquote>
<p>异步加载又叫非阻塞，浏览器在下载执行 <code>js</code> 同时，还会继续进行后续页面的处理</p>
<blockquote>
<p>异步加载 JavaScript</p>
</blockquote>
<ul>
<li>动态添加 <code>script</code> 标签</li>
<li><code>defer</code></li>
<li><code>async</code></li>
</ul>
<blockquote>
<p><code>defer</code>属性和<code>async</code>都是属于 <code>script</code> 标签上面的属性，两者都能实现 <code>JavaScript</code> 的异步加载。不同之处在于：<code>async</code> 在异步加载完成的时候就马上开始执行了，<code>defer</code> 会等到 <code>html</code> 加载完毕之后再执行</p>
</blockquote>
<h5 id="j12">12. 跨域问题的产生，怎么解决它</h5>

<blockquote>
<p>由于浏览器的 <a href="http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html" target="_blank" rel="noopener">同源策略</a>，在出现 域名、端口、协议有一种不一致时，就会出现跨域，属于浏览器的一种安全限制。</p>
</blockquote>
<p>解决跨域问题有很多种方式，常用的就是以下几种：</p>
<ul>
<li><code>jsonp</code> 跨域：动态创建<code>script</code>，再请求一个带参网址实现跨域通信.缺点就是只能实现 <code>get</code> 一种请求</li>
<li><code>document.domain + iframe</code>跨域：两个页面都通过js强制设置<code>document.domain</code>为基础主域，就实现了同域.但是仅限主域相同，子域不同的跨域应用场景</li>
<li>跨域资源共享（CORS）：只服务端设置<code>Access-Control-Allow-Origin</code>即可，前端无须设置，若要带<code>cookie</code>请求：前后端都需要设置</li>
<li><code>nginx</code>反向代理接口跨域：同源策略是浏览器的安全策略，不是<code>HTTP</code>协议的一部分。服务器端调用<code>HTTP</code>接口只是使用<code>HTTP</code>协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题</li>
<li><code>WebSocket</code>协议跨域</li>
</ul>
<h5 id="j13">13. 对 this 的理解</h5>

<p>在 <code>JavaScript</code> 中，研究 <code>this</code> 一般都是 <code>this</code> 的指向问题，核心就是 <strong><code>this</code> 永远指向最终调用它的那个对象</strong>，除非改变 <code>this</code> 指向或者箭头函数那种特殊情况</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">test() <span class="comment">// window</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  foo: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="built_in">console</span>.log(<span class="keyword">this</span>.bar) &#125;,</span><br><span class="line">  bar: <span class="number">1</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> foo = obj.foo;</span><br><span class="line"><span class="keyword">var</span> bar = <span class="number">2</span>;</span><br><span class="line"></span><br><span class="line">obj.foo() <span class="comment">// 1</span></span><br><span class="line">foo() <span class="comment">// 2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 函数调用的环境不同，所得到的结果也是不一样的</span></span><br></pre></td></tr></table></figure>
<h5 id="j14">14. apply()、call()和 bind() 是做什么的，它们有什么区别</h5>

<p>相同点：三者都可以<strong>改变 this 的指向</strong></p>
<p>不同点： </p>
<ul>
<li>apply 方法传入两个参数：一个是作为函数上下文的对象，另外一个是作为函数参数所组成的数组</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    name : <span class="string">'sss'</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func</span>(<span class="params">firstName, lastName</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(firstName + <span class="string">' '</span> + <span class="keyword">this</span>.name + <span class="string">' '</span> + lastName);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">func.apply(obj, [<span class="string">'A'</span>, <span class="string">'B'</span>]);    <span class="comment">// A sss B</span></span><br></pre></td></tr></table></figure>
<ul>
<li><code>call</code> 方法第一个参数也是作为函数上下文的对象，但是后面传入的是一个参数列表，而不是单个数组</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    name: <span class="string">'sss'</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func</span>(<span class="params">firstName, lastName</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(firstName + <span class="string">' '</span> + <span class="keyword">this</span>.name + <span class="string">' '</span> + lastName);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">func.call(obj, <span class="string">'C'</span>, <span class="string">'D'</span>);       <span class="comment">// C sss D</span></span><br></pre></td></tr></table></figure>
<ul>
<li><code>bind</code> 接受的参数有两部分，第一个参数是是作为函数上下文的对象，第二部分参数是个列表，可以接受多个参数</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    name: <span class="string">'sss'</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.name);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> func1 = func.bind(<span class="literal">null</span>, <span class="string">'xixi'</span>);</span><br><span class="line">func1();</span><br></pre></td></tr></table></figure>
<blockquote>
<p><code>apply</code>、<code>call</code> 方法都会使函数立即执行，因此它们也可以用来调用函数</p>
</blockquote>
<blockquote>
<p><code>bind</code> 方法不会立即执行，而是返回一个改变了上下文 <code>this</code> 后的函数。而原函数 <code>func</code> 中的 <code>this</code> 并没有被改变，依旧指向全局对象 <code>window</code></p>
</blockquote>
<blockquote>
<p><code>bind</code> 在传递参数的时候会将自己带过去的参数排在原函数参数之前</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func</span>(<span class="params">a, b, c</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(a, b, c);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> func1 = func.bind(<span class="keyword">this</span>, <span class="string">'xixi'</span>);</span><br><span class="line">func1(<span class="number">1</span>,<span class="number">2</span>) <span class="comment">// xixi 1 2</span></span><br></pre></td></tr></table></figure>
<h5 id="j15">15. 什么是内存泄漏，哪些操作会造成内存泄漏</h5>

<blockquote>
<p>内存泄漏：是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束</p>
</blockquote>
<p>可能造成内存泄漏的操作：</p>
<ul>
<li>意外的全局变量</li>
<li>闭包</li>
<li>循环引用</li>
<li>被遗忘的定时器或者回调函数</li>
</ul>
<p>你可能还需要知道 <a href="http://www.ruanyifeng.com/blog/2017/04/memory-leak.html" target="_blank" rel="noopener">垃圾回收机制</a> 此外，高程上面对垃圾回收机制的介绍也很全面，有兴趣的小伙伴可以看看</p>
<h5 id="j16">16. 什么是事件代理，它的原理是什么</h5>

<blockquote>
<p>事件代理：通俗来说就是将元素的事件委托给它的父级或者更外级元素处理</p>
</blockquote>
<blockquote>
<p>原理：利用事件冒泡机制实现的</p>
</blockquote>
<blockquote>
<p>优点：只需要将同类元素的事件委托给父级或者更外级的元素，不需要给所有元素都绑定事件，减少内存空间占用，提升性能; 动态新增的元素无需重新绑定事件</p>
</blockquote>
<h5 id="j17">17. 对AMD和CMD的理解，它们有什么区别</h5>

<blockquote>
<p><code>AMD</code>和<code>CMD</code>都是为了解决浏览器端模块化问题而产生的，<code>AMD</code>规范对应的库函数有 <code>Require.js</code>，<code>CMD</code>规范是在国内发展起来的，对应的库函数有<code>Sea.js</code></p>
</blockquote>
<p><strong>AMD和CMD最大的区别是对依赖模块的执行时机处理不同</strong></p>
<blockquote>
<p>1、AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块 </p>
</blockquote>
<blockquote>
<p>2、CMD推崇就近依赖，只有在用到某个模块的时候再去require</p>
</blockquote>
<p>参考：<a href="https://github.com/amdjs/amdjs-api/wiki/AMD-%28%E4%B8%AD%E6%96%87%E7%89%88%29" target="_blank" rel="noopener">AMD-中文版</a>   <a href="https://github.com/seajs/seajs/issues/242" target="_blank" rel="noopener">CMD-规范</a></p>
<h5 id="j18">18. 对ES6的了解</h5>

<blockquote>
<p>ECMAScript 6.0 是 JavaScript 语言的下一代标准</p>
</blockquote>
<p>新增的特性：</p>
<ul>
<li>声明变量的方式 <code>let</code>  <code>const</code></li>
<li>变量解构赋值</li>
<li>字符串新增方法 <code>includes()</code>  <code>startsWith()</code>  <code>endsWith()</code> 等</li>
<li>数组新增方法 <code>Array.from()</code>  <code>Array.of()</code>  <code>entries()</code>  <code>keys()</code>      <code>values()</code> 等</li>
<li>对象简洁写法以及新增方法 <code>Object.is()</code>  <code>Object.assign()</code> <code>entries()</code> <code>keys()</code>  <code>values()</code>等</li>
<li>箭头函数、<code>rest</code> 参数、函数参数默认值等</li>
<li>新的数据结构： <code>Set</code> 和 <code>Map</code></li>
<li><code>Proxy</code></li>
<li><code>Promise</code>对象</li>
<li><code>async</code>函数 <code>await</code>命令</li>
<li><code>Class</code>类</li>
<li><code>Module</code> 体系 模块的加载和输出方式</li>
</ul>
<p>了解更多，参考 <a href="http://es6.ruanyifeng.com/#README" target="_blank" rel="noopener">ES6入门-阮一峰</a></p>
<h5 id="j19">19. 箭头函数有什么特点</h5>

<blockquote>
<p>ES6 允许使用“箭头”（=&gt;）定义函数</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> f = <span class="function"><span class="params">v</span> =&gt;</span> v;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 等同于</span></span><br><span class="line"><span class="keyword">var</span> f = <span class="function"><span class="keyword">function</span> (<span class="params">v</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> v;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>注意点：</p>
<ul>
<li>函数体内的 <code>this</code> 对象，就是定义时所在的对象，而不是使用时所在的对象</li>
<li>不可以当作构造函数，也就是说，不可以使用 <code>new</code> 命令，否则会抛出一个错误</li>
<li>不可以使用 <code>arguments</code> 对象，该对象在函数体内不存在。如果要用，可以用 <code>rest</code> 参数代替</li>
</ul>
<h5 id="j20">20. Promise 对象的了解</h5>

<blockquote>
<p>Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大.所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果 –ES6入门-阮一峰</p>
</blockquote>
<blockquote>
<p><code>Promise</code> 对象代表一个异步操作，有三种状态：<code>pending</code>（进行中）、<code>fulfilled</code>（已成功）和 <code>rejected</code>（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态</p>
</blockquote>
<p>特点： </p>
<ul>
<li>对象的状态不受外界影响</li>
<li>一旦状态改变，就不会再变，任何时候都可以得到这个结果</li>
<li><code>Promise</code> 新建后就会立即执行</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> promise = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve, reject</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// ... some code</span></span><br><span class="line"></span><br><span class="line">  <span class="keyword">if</span> (<span class="comment">/* 异步操作成功 */</span>)&#123;</span><br><span class="line">    resolve(value);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    reject(error);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<blockquote>
<p>Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">promise.then(<span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// success</span></span><br><span class="line">&#125;, <span class="function"><span class="keyword">function</span>(<span class="params">error</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// failure</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<blockquote>
<p><code>then</code> 方法返回的是一个新的Promise实例</p>
</blockquote>
<blockquote>
<p><code>Promise.prototype.catch</code> 用于指定发生错误时的回调函数,具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个<code>catch</code>语句捕获</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">getJSON(<span class="string">'/post/1.json'</span>).then(<span class="function"><span class="keyword">function</span>(<span class="params">post</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> getJSON(post.commentURL);</span><br><span class="line">&#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params">comments</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// some code</span></span><br><span class="line">&#125;).catch(<span class="function"><span class="keyword">function</span>(<span class="params">error</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 处理前面三个Promise产生的错误</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<blockquote>
<p><code>catch</code> 方法返回的还是一个 <code>Promise</code> 对象，因此后面还可以接着调用 <code>then</code> 方法</p>
</blockquote>
<p>出去上述方法，Promise还有其他用法，小伙伴们可以在这里查看大佬写的文章 <a href="http://es6.ruanyifeng.com/#README" target="_blank" rel="noopener">ES6入门-阮一峰</a></p>
<h5 id="j21">21. async 函数以及 awit 命令</h5>

<blockquote>
<p><code>async</code> 函数是什么？一句话，它就是 <code>Generator</code> 函数的语法糖</p>
</blockquote>
<p>了解Generator函数的小伙伴，这里 <a href="http://es6.ruanyifeng.com/#docs/generator" target="_blank" rel="noopener">传送门</a></p>
<p><code>async</code> 特点：</p>
<blockquote>
<p><code>async</code> 函数返回一个 <code>Promise</code> 对象，可以使用 <code>then</code> 方法添加回调函数。当函数执行的时候，一旦遇到 <code>await</code> 就会先返回，等到异步操作完成，再接着执行函数体内后面的语句</p>
</blockquote>
<blockquote>
<p><code>async</code> 函数内部 <code>return</code> 语句返回的值，会成为 <code>then</code> 方法回调函数的参数</p>
</blockquote>
<blockquote>
<p><code>async</code> 函数返回的 <code>Promise</code> 对象，必须等到内部所有 <code>await</code> 命令后面的 <code>Promise</code> 对象执行完，才会发生状态改变，除非遇到 <code>return</code> 语句或者抛出错误</p>
</blockquote>
<blockquote>
<p><code>async</code> 函数内部抛出错误，会导致返回的 <code>Promise</code> 对象变为 <code>reject</code> 状态。抛出的错误对象会被 <code>catch</code> 方法回调函数接收到</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">timeout</span>(<span class="params">ms</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> &#123;</span><br><span class="line">    setTimeout(resolve, ms);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">asyncPrint</span>(<span class="params">value, ms</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">await</span> timeout(ms);</span><br><span class="line">  <span class="built_in">console</span>.log(value);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">asyncPrint(<span class="string">'hello world'</span>, <span class="number">50</span>);</span><br></pre></td></tr></table></figure>
<blockquote>
<p><code>await</code> 命令: <code>await</code> 命令后面是一个 <code>Promise</code> 对象，返回该对象的结果。如果不是 <code>Promise</code> 对象，就直接返回对应的值</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 等同于</span></span><br><span class="line">  <span class="comment">// return 123;</span></span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">await</span> <span class="number">123</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">f().then(<span class="function"><span class="params">v</span> =&gt;</span> <span class="built_in">console</span>.log(v))</span><br><span class="line"><span class="comment">// 123</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p><code>await</code> 命令后面是一个<code>thenable</code>对象（即定义then方法的对象），那么<code>await</code>会将其等同于 <code>Promise</code> 对象.也就是说就算一个对象不是<code>Promise</code>对象，但是只要它有<code>then</code>这个方法， <code>await</code> 也会将它等同于<code>Promise</code>对象</p>
</blockquote>
<p>使用注意点：</p>
<ul>
<li><code>await</code> 命令后面的 <code>Promise</code> 对象，运行结果可能是 <code>rejected</code>，所以最好把 <code>await</code> 命令放在 <code>try...catch</code> 代码块中</li>
<li>多个 <code>await</code> 命令后面的异步操作，如果不存在继发关系，最好让它们同时触发</li>
<li><code>await</code> 命令只能用在 <code>async</code> 函数之中，如果用在普通函数，就会报错</li>
</ul>
<p>了解更多，请点击 <a href="http://es6.ruanyifeng.com/#docs/async" target="_blank" rel="noopener">这里</a></p>
<h5 id="j22">22. export 与 export default有什么区别</h5>

<blockquote>
<p><code>export</code> 与 <code>export default</code> 均可用于导出常量、函数、文件、模块等</p>
</blockquote>
<blockquote>
<p>在一个文件或模块中，<code>export</code>、<code>import</code> 可以有多个，<code>export default</code> 仅有一个</p>
</blockquote>
<blockquote>
<p>通过 <code>export</code> 方式导出，在导入时要加 <code>{ }</code>，<code>export default</code> 则不需要</p>
</blockquote>
<blockquote>
<p>使用 <code>export default</code>命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名; <code>export</code> 加载的时候需要知道加载模块的变量名</p>
</blockquote>
<blockquote>
<p><code>export default</code> 命令的本质是将后面的值，赋给 <code>default</code> 变量，所以可以直接将一个值写在 <code>export default</code> 之后</p>
</blockquote>
<h5 id="j23">23. 前端性能优化</h5>

<p>参见 <a href="https://blog.csdn.net/qfkfw/article/details/7272961" target="_blank" rel="noopener">雅虎14条前端性能优化</a></p>
<h5 id="j24">24. 对JS引擎执行机制的理解</h5>

<p>首选明确两点：</p>
<blockquote>
<p><code>JavaScript</code> 是单线程语言</p>
</blockquote>
<blockquote>
<p><code>JavaScript</code> 的 <code>Event Loop</code> 是 <code>JS</code> 的执行机制, 也就是事件循环</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">    </span><br><span class="line">setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">2</span>)</span><br><span class="line">&#125;,<span class="number">0</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">3</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1 3 2</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p><code>JavaScript</code> 将任务分为同步任务和异步任务，执行机制就是先执行同步任务，将同步任务加入到主线程，遇到异步任务就先加入到 <code>event table</code> ，当所有的同步任务执行完毕，如果有可执行的异步任务，再将其加入到主线程中执行</p>
</blockquote>
<p>视频详解，移步 <a href="https://vimeo.com/96425312" target="_blank" rel="noopener">这里</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="built_in">console</span>.log(<span class="number">1</span>);&#125;,<span class="number">0</span>);</span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve</span>)</span>&#123;</span><br><span class="line">     <span class="built_in">console</span>.log(<span class="number">2</span>);</span><br><span class="line">     <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">10000</span>; i++)&#123;</span><br><span class="line">         i == <span class="number">99</span> &amp;&amp; resolve();</span><br><span class="line">     &#125;</span><br><span class="line"> &#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">     <span class="built_in">console</span>.log(<span class="number">3</span>)</span><br><span class="line"> &#125;);</span><br><span class="line"> </span><br><span class="line"> <span class="built_in">console</span>.log(<span class="number">4</span>);</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 2 4 3 1</span></span><br></pre></td></tr></table></figure>
<p>在异步任务中，定时器也属于特殊的存在。有人将其称之为 宏任务、微任务，定时器就属于宏任务的范畴。</p>
<p>参考 <a href="https://segmentfault.com/a/1190000012806637" target="_blank" rel="noopener">JS引擎的执行机制</a></p>

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        
  <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
    <div>坚持原创技术分享，您的支持将鼓励我继续创作！</div>
    <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
      <span>赏</span>
    </button>
    <div id="QR" style="display: none;">
      
        <div id="wechat" style="display: inline-block">
          <img id="wechat_qr" src="https://wurh.github.io/images/others/weixinshou.png" alt="华Ing WeChat Pay"/>
          <p>微信打赏</p>
        </div>
      
      
        <div id="alipay" style="display: inline-block">
          <img id="alipay_qr" src="https://wurh.github.io/images/others/alifu.png" alt="华Ing Alipay"/>
          <p>支付宝打赏</p>
        </div>
      
    </div>
  </div>


      
    </div>

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/前端-知识-面试/" rel="tag">#前端 知识 面试</a>
          
        </div>
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2019/03/31/201904010033/" rel="next" title="前端面试《第十六篇》 html+css">
                <i class="fa fa-chevron-left"></i> 前端面试《第十六篇》 html+css
              </a>
            
          </div>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2019/03/31/201904010054/" rel="prev" title="前端面试《第十八篇》 小程序">
                前端面试《第十八篇》 小程序 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
        
<script>
  with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='//bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>

      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
      <div class="ds-thread" data-thread-key="2019/03/31/201904010040/"
           data-title="前端面试《第十七篇》javascript 基础" data-url="http://wurh.github.io/2019/03/31/201904010040/">
      </div>
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            Table of Contents
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            Overview
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel ">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="//schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="https://wurh.github.io/images/avatar/logo.jpg?123456"
               alt="华Ing" />
          <p class="site-author-name" itemprop="name">华Ing</p>
          <p class="site-description motion-element" itemprop="description">harder and harder</p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">56</span>
              <span class="site-state-item-name">posts</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              <a href="/categories">
                <span class="site-state-item-count">11</span>
                <span class="site-state-item-name">categories</span>
              </a>
            </div>
          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">15</span>
                <span class="site-state-item-name">tags</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/wurh" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://weibo.com/1674582564/profile?topnav=1&wvr=6" target="_blank" title="微博">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  微博
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://www.zhihu.com/people/wu-rong-hua-56" target="_blank" title="知乎">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  知乎
                </a>
              </span>
            
          
        </div>

        
        

        
        
          <div class="links-of-blogroll motion-element links-of-blogroll-inline">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-globe"></i>
              Links
            </div>
            <ul class="links-of-blogroll-list">
              
                <li class="links-of-blogroll-item">
                  <a href="http://fsiaonma.github.io/" title="sam博客" target="_blank">sam博客</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://shenjoel.github.io/" title="joel博客" target="_blank">joel博客</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://firewood1122.github.io" title="firewood博客" target="_blank">firewood博客</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://reqianduan.com" title="热前端" target="_blank">热前端</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://opentutorial.info/" title="黄超博客" target="_blank">黄超博客</a>
                </li>
              
            </ul>
          </div>
        

      </section>

      
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">
            
              
            
            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#undefined"><span class="nav-number">1.</span> <span class="nav-text">目录</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#j1"><span class="nav-number">1.0.0.1.</span> <span class="nav-text">1. JavaScript 有哪些数据类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j2"><span class="nav-number">1.0.0.2.</span> <span class="nav-text">2. 怎么判断不同的JS数据类型 </span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j3"><span class="nav-number">1.0.0.3.</span> <span class="nav-text">3. undefined 和 null 有什么区别</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j4"><span class="nav-number">1.0.0.4.</span> <span class="nav-text">4. 数组对象有哪些常用方法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j5"><span class="nav-number">1.0.0.5.</span> <span class="nav-text">5. Js 有哪几种创建对象的方式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j6"><span class="nav-number">1.0.0.6.</span> <span class="nav-text">6. 怎么实现对对象的拷贝(浅拷贝与深拷贝)</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j7"><span class="nav-number">1.0.0.7.</span> <span class="nav-text">7. 什么是闭包，为什么要用它</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j8"><span class="nav-number">1.0.0.8.</span> <span class="nav-text">8. 介绍一下 JavaScript 原型，原型链，它们有何特点</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j9"><span class="nav-number">1.0.0.9.</span> <span class="nav-text">9. JavaScript 如何实现继承</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j10"><span class="nav-number">1.0.0.10.</span> <span class="nav-text">10. new 操作符具体干了什么</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j11"><span class="nav-number">1.0.0.11.</span> <span class="nav-text">11. 同步和异步的区别，怎么异步加载 JavaScript</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j12"><span class="nav-number">1.0.0.12.</span> <span class="nav-text">12. 跨域问题的产生，怎么解决它</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j13"><span class="nav-number">1.0.0.13.</span> <span class="nav-text">13. 对 this 的理解</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j14"><span class="nav-number">1.0.0.14.</span> <span class="nav-text">14. apply()、call()和 bind() 是做什么的，它们有什么区别</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j15"><span class="nav-number">1.0.0.15.</span> <span class="nav-text">15. 什么是内存泄漏，哪些操作会造成内存泄漏</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j16"><span class="nav-number">1.0.0.16.</span> <span class="nav-text">16. 什么是事件代理，它的原理是什么</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j17"><span class="nav-number">1.0.0.17.</span> <span class="nav-text">17. 对AMD和CMD的理解，它们有什么区别</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j18"><span class="nav-number">1.0.0.18.</span> <span class="nav-text">18. 对ES6的了解</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j19"><span class="nav-number">1.0.0.19.</span> <span class="nav-text">19. 箭头函数有什么特点</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j20"><span class="nav-number">1.0.0.20.</span> <span class="nav-text">20. Promise 对象的了解</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j21"><span class="nav-number">1.0.0.21.</span> <span class="nav-text">21. async 函数以及 awit 命令</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j22"><span class="nav-number">1.0.0.22.</span> <span class="nav-text">22. export 与 export default有什么区别</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j23"><span class="nav-number">1.0.0.23.</span> <span class="nav-text">23. 前端性能优化</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#j24"><span class="nav-number">1.0.0.24.</span> <span class="nav-text">24. 对JS引擎执行机制的理解</span></a></li></ol></li></ol></li></ol></li></ol></div>
            
          </div>
        </section>
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy;  2013 - 
  <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">华Ing</span>
</div>

<div class="powered-by">
  Powered by <a class="theme-link" href="https://hexo.io">Hexo</a>
</div>

<div class="theme-info">
  Theme -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Pisces
  </a>
</div>

        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.0.2"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.0.2"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.0.2"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.0.2"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.0.2"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.0.2"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.2"></script>



  

  
    
  

  <script type="text/javascript">
    var duoshuoQuery = {short_name:"wurh"};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.id = 'duoshuo-script';
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0]
      || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
  </script>

  
    
    <script src="/lib/ua-parser-js/dist/ua-parser.min.js?v=0.7.9"></script>
    <script src="/js/src/hook-duoshuo.js"></script>
  






  
  

  

  

  

  


</body>
</html>
